<template>
    <div class="echart">
        <el-form label-width="120px" :inline="false" label-position="top">
            <div class="echart-type" v-if="form.echartType=='pie' || form.echartType=='loudou' || form.echartType=='quan' || form.echartType=='wordCloud'">
                <el-form-item label="图例来源方式">
                    <el-radio-group v-model="echatForm.XDataFrom.paramValue">
                        <el-radio label="0">字段,数据为准(字段在数据源中分组)</el-radio>
                        <el-radio label="1">字段,字典为准</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="图例关联字段">
                    <el-select v-model="echatForm.XColumn.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图例字段关联字典">
                    <el-input
                        placeholder="Search..."
                        v-model="echatForm.Xconfig_name.paramValue" class="w300">
                            <el-button slot="append" @click="_selectZidian" type="warning" icon="el-icon-search">选择字典</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="数据来源方式">
                    <el-radio-group v-model="echatForm.YDataValueFrom.paramValue">
                        <el-radio label="0">字段(具体字段值)</el-radio>
                        <el-radio label="1">字段分组(字段统计结果)</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div class="echart-type" v-if="form.echartType=='gauge'">
                <el-form-item label="图例来源方式">
                    <el-radio-group v-model="echatForm.XDataFrom.paramValue">
                        <el-radio label="0">字段,数据为准(字段在数据源中分组)</el-radio>
                        <el-radio label="1">字段,字典为准</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="图例关联字段">
                    <el-select v-model="echatForm.XColumn.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="圖例目标字段">
                    <el-select v-model="echatForm.ResultColumnDiv.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据来源方式">
                    <el-radio-group v-model="echatForm.YDataValueFrom.paramValue">
                        <el-radio label="0">字段(具体字段值)</el-radio>
                        <el-radio label="1">字段分组(字段统计结果)</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div class="echart-type" v-if="form.echartType=='Radar'">
                <el-form-item label="设置纬度最大值">
                    <el-input v-model="echatForm.maxvalue.paramValue" type="number" class="w300"></el-input>
                </el-form-item>
                <el-form-item label="指标源方式">
                    <el-radio-group v-model="echatForm.XDataFrom.paramValue">
                        <el-radio label="0">字段,数据为准(字段在数据源中分组)</el-radio>
                        <el-radio label="1">字段,字典为准</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="指标关联字段">
                    <el-select v-model="echatForm.XColumn.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字段关联字典">
                    <el-input
                        placeholder="Search..."
                        v-model="echatForm.Xconfig_name.paramValue" class="w300">
                            <el-button slot="append" @click="_selectZidian('x')" type="warning" icon="el-icon-search">选择字典</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="统计关联字段">
                    <el-select v-model="echatForm.YColumn.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="echart-type" v-if="form.echartType=='tupu' || form.echartType=='tree'">
                <el-form-item label="图谱数据来源方式">
                    <el-radio-group v-model="echatForm.dataway.paramValue" class="w300">
                        <el-radio label="sql">SQL</el-radio>
                        <el-radio label="tree">树方案</el-radio>
                    </el-radio-group>
                    <el-form-item label="关联树方案" v-show="echatForm.dataway.paramValue=='tree'">
                        <el-button>选择树方案</el-button>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="取值字段">
                    <el-select v-model="echatForm.DataId.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="取值字段显示值">
                    <el-select v-model="echatForm.DataName.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父级字段">
                    <el-select v-model="echatForm.DataPid.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="取值字段初始值" v-show="form.echartType=='tupu'">
                    <el-input v-model="echatForm.Datavalue.paramValue" class="w300"></el-input>
                </el-form-item>
                <el-form-item label="最大层数" v-show="form.echartType=='tupu'">
                    <el-input v-model="echatForm.maxLevel.paramValue" type="number" class="w300"></el-input>
                </el-form-item>
            </div>
            <div class="echart-type" v-if="form.echartType=='bar'">
                <h3 class="type-title">X轴配置</h3>
                <el-form-item label="x轴来源方式">
                    <el-radio-group v-model="echatForm.XDataFrom.paramValue">
                        <el-radio label="0">字段,数据为准(字段在数据源中分组)</el-radio>
                        <el-radio label="1">字段,字典为准</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="x轴关联字段">
                    <el-select v-model="echatForm.XColumnDiv.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="x轴字段关联字典">
                    <el-input
                        placeholder="Search..."
                        v-model="echatForm.Xconfig_name.paramValue" class="w300">
                            <el-button slot="append" @click="_selectZidian('x')" type="warning" icon="el-icon-search">选择字典</el-button>
                    </el-input>
                </el-form-item>
                <h3 class="type-title">Y轴配置</h3>
                <el-form-item label="y轴图块来源方式">
                    <el-radio-group v-model="echatForm.YDataFrom.paramValue">
                        <el-radio label="0">字段,数据为准(字段在数据源中分组)</el-radio>
                        <el-radio label="1">字段,字典为准</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Y轴来源方式">
                    <el-radio-group v-model="echatForm.YDataValueFrom.paramValue">
                        <el-radio label="0">字段,数据为准(字段在数据源中分组)</el-radio>
                        <el-radio label="1">字段,字典为准</el-radio>
                        <el-radio label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Y轴关联字段">
                    <el-select v-model="echatForm.YColumnDiv.paramValue" placeholder="请选择" class="w300">
                        <el-option
                            v-for="item in glzdOptions"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Y轴字段关联字典">
                    <el-input
                        placeholder="Search..."
                        v-model="echatForm.Yconfig_name.paramValue" class="w300">
                            <el-button slot="append" @click="_selectZidian('y')" type="warning" icon="el-icon-search">选择字典</el-button>
                    </el-input>
                </el-form-item>
            </div>
            <el-button type="primary" @click="_saveEchartConfig">保存设置</el-button>
        </el-form>
    </div>
</template>

<script>
import { saveEchartConfig, getDataXsql } from '@/api/api'
import { mapGetters, mapActions } from 'vuex'
export default {
    props: ['form','echatForm','glzdOptions','dataSourseId'],
    data() {
        return {
            dialogVisible: false,
        }
    },
    computed: {
		...mapGetters(['addSourseVisible','editSourseVisible']),
	},
    methods: {
        ...mapActions([
            'addSourseVisibleChange',
            'editSourseVisibleChange',
            'editSuccessChange'
        ]),
        _selectZidian(type){
            this.$emit('open',type)
        },
        
        // 保存echart配置
        _saveEchartConfig(){
            let form = [];
            for(const key in this.echatForm) {
                if(key=='XColumnDiv') {
                    this.echatForm[key].paramValue = this.echatForm['XColumn'].paramValue
                } else if(key=='YColumn') {
                    if(!this.echatForm[key].paramValue){
                        this.echatForm[key].paramValue = this.echatForm['YColumnDiv'].paramValue
                    }
                }
                form.push(this.echatForm[key])
            }
            const params = {
                type: this.form.echartType,
                recode: this.dataSourseId
            }
            if(this.form.echartType!='pie' && this.form.echartType!='tupu') {
                const formData = {
                    "xColumnDiv": this.echatForm.XColumn?this.echatForm.XColumn.paramValue: '',
                    "xConfigCode": this.echatForm.Xconfig_code?this.echatForm.Xconfig_code.paramValue: '',
                    "xConfigType": this.echatForm.Xconfig_type?this.echatForm.Xconfig_type.paramValue: '',
                    "xDataFrom": this.echatForm.XDataFrom?this.echatForm.XDataFrom.paramValue: '',
                    "formId": "",
                    "defSql": this.form.defSql,
                    "type": this.form.echartType,
                    "resultColumnDiv": this.echatForm.ResultColumnDiv?this.echatForm.ResultColumnDiv.paramValue: '',
                    "yColumnDiv": this.echatForm.YColumn?this.echatForm.YColumn.paramValue: '',
                    "maxValue": 10
                }
                getDataXsql(formData).then(res=>{
                    if(res.rcode=='0000') {
                        const len = form.length-1
                        form[len].paramValue = res.data
                        saveEchartConfig(form,params).then(res=>{
                            if(res.rcode=='0000') {
                                this.$message({
                                    message: '设置成功',
                                    type: 'success'
                                });
                                this.editSuccessChange(true)
                                this.$emit('save')
                            }
                        })
                    }
                })
            } else {
                saveEchartConfig(form,params).then(res=>{
                    if(res.rcode=='0000') {
                        this.$message({
                            message: '设置成功',
                            type: 'success'
                        });
                        this.editSuccessChange(true)
                        this.$emit('save')
                    }
                })
            }
            
        }
    }
}
</script>
<style lang="scss" scoped>
.widget-config-container .config-content{
    .w300{
        width: 300px !important;
    }
    .echart-type{
        .type-title{
            font-size: 16px;
            color: #666;
            padding-top: 15px;
            border-top: 1px solid #ccc;
        }
    }
    .el-form-item{
        border: none;
        padding: 0;
        margin-bottom: 10px;
        .el-input,.el-select{
            width: 240px;
        }
    }
}   
    
</style>